<template>
	<view>
		<view class="goods-list">
			<!-- 列表 -->
			<view class="goods-list-item" v-for="(item,index) in goodsList" :key="index" @click="gotoGoodsDetail(item)">
				<!-- 左部 -->
				<view class="goods-list-item-left">
					<!-- 图片 -->
					<image class="goods-pic" :src="item.goods_small_logo || defaultPic"></image>
				</view>
				<!-- 右部 -->
				<view class="goods-list-item-right">
					<!-- 标题 -->
					<view class="goods-title">
						{{item.goods_name}}
					</view>
					<!-- 价格 -->
					<view class="goods-price">
						￥{{item.goods_price | tofixed}}
					</view>
				</view>
			</view>
			<!-- 加载结束底部 -->
			<view class="finished" v-if="isFinished">
				抱歉，没有更多了~
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 商品列表
				goodsList: [],
				// 请求查询参数
				queryData: {
					query: '',
					pid: '',
					pagenum: 1,
					pagesize: 10
				},
				// 总条数
				total: 0,
				// 默认图片地址
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
				// 上拉节流阀
				isLoading: false,
				// 是否还有数据
				isFinished:false
			};
		},
		onLoad(options) {
			// 转存页面参数
			this.queryData.query = options.query || ''
			this.queryData.pid = options.pid || ''
			// 获取商品列表
			this.getGoodsList()
		},
		filters: {
			tofixed(num) {
				return Number(num).toFixed(2)
			}
		},
		methods: {
			// 获取商品部列表
			async getGoodsList(cb) {
				this.isLoading = true
				const res = await uni.$http.get('/api/public/v1/goods/search', this.queryData)
				this.isLoading = false
				cb && cb()
				if (res.data.meta.status !== 200) return uni.$showMsg()
				this.goodsList = [...this.goodsList, ...res.data.message.goods]
				this.total = res.data.message.total
			},
			// 点击跳转
			gotoGoodsDetail(item){
				uni.navigateTo({
					url:'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id
				})
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.total = 0
			this.goodsList = []
			this.isLoading = false
			this.queryData.pagenum = 1
			this.getGoodsList(() => uni.stopPullDownRefresh())
		},
		// 上拉加载更多
		onReachBottom() {
			if(this.queryData.pagenum * this.queryData.pagesize >= this.total) {
				return this.isFinished = true
			}
			if (this.isLoading) return
			this.queryData.pagenum++
			this.getGoodsList()
		}
	}
</script>

<style lang="scss">
	.goods-list {
		.goods-list-item {
			display: flex;
			padding: 10rpx 20rpx;
			border-bottom: 2rpx solid #efefef;

			.goods-list-item-left {
				margin-right: 20rpx;	

				.goods-pic {
					width: 200rpx;
					height: 200rpx;
					display: block;
				}
			}

			.goods-list-item-right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.goods-title {
					font-size: 26rpx;
				}

				.goods-price {
					font-size: 32rpx;
					color: #c00000;
				}
			}
		}
		.finished {
			padding: 20rpx 0;
			text-align: center;
			color: #999;
			font-size: 26rpx;
		}
	}
</style>
